<template>
  <div>
    <div class="box">
      <div class="top">
        <label v-for="(item, index) in arr" :key="index">
          <input type="checkbox" name="" :value="item" v-model="favorite"/>
          {{ item }}
        </label>
      </div>
      <ul class="down">
        <li v-for="(item, index) in favorite" :key="index">{{ item }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: ["科幻", "喜剧", "动漫", "冒险", "科技", "军事", "娱乐", "奇闻"],
      favorite: [],
    };
  },
  methods: {},
};
</script>

<style lang="less">
.box {
  width: 600px;
  height: 300px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-evenly;
  margin: 60px auto;
  border-radius: 8px;
  border: 3px solid #e0e0e0;
  .top {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .down {
    width: 400px;
    height: 160px;
  }
}
</style>